import React, { Component } from 'react'
import { withRouter, Link } from 'react-router-dom'
import { Layout, Menu, Icon, Avatar, Badge, Dropdown } from 'antd'
import { logout } from '../../actions/user'
import { connect } from 'react-redux'
const { Header, Content, Sider } = Layout

const mapStateToProps = state => {
  return {
    name: state.user.displayName,
    notificationCount: state.notifications.data.reduce((res, item) => {
      if (item.isRead === false) res += 1
      return res
    }, 0)
  }
}
@connect(
  mapStateToProps,
  { logout }
)
@withRouter
export default class Frame extends Component {
  /* topDropdownMenu = (
    <Menu>
      <Menu.Item key="1">
        <Link to="/admin/notifications">
          <Icon type="bell" />
          通知中心
        </Link>
      </Menu.Item>
      <Menu.Item key="2">
        <Link to="/">
          <Icon type="user" />
          个人中心
        </Link>
      </Menu.Item>
      <Menu.Item key="3" onClick={e => this.clickspan(e)}>
        <span>
          <Link to="/">
            <Icon type="logout" />
            退出
          </Link>
        </span>
      </Menu.Item>
    </Menu>
  ) */
  logoutButtonClick = ({ key }) => {
    if (key === '3') {
      this.props.logout()
    }
  }
  handleClick = ({ key }) => {
    this.props.history.push(key)
  }

  render() {
    const { name, notificationCount, routes, children } = this.props
    const selectedArr = this.props.location.pathname.split('/')
    selectedArr.length = 3
    return (
      <Layout>
        <Header className="header">
          <div className="logo" />
          <Dropdown
            overlay={
              <Menu>
                <Menu.Item key="1">
                  <Link to="/admin/notifications">
                    <Icon type="bell" />
                    通知中心
                  </Link>
                </Menu.Item>
                <Menu.Item key="2">
                  <Link to="/">
                    <Icon type="user" />
                    个人中心
                  </Link>
                </Menu.Item>
                <Menu.Item key="3" onClick={this.logoutButtonClick}>
                  <span>
                    <Link to="/">
                      <Icon type="logout" />
                      退出
                    </Link>
                  </span>
                </Menu.Item>
              </Menu>
            }
            placement={'bottomCenter'}
            trigger={['click']}
          >
            <Avatar icon="user" style={{ cursor: 'pointer' }} />
          </Dropdown>
          <span style={{ color: '#fff' }}>{name}</span>
          <Badge
            count={notificationCount}
            overflowCount={99}
            style={{ position: 'absolute', top: '-20px' }}
          >
            <span className="head-example" />
          </Badge>
        </Header>
        <Layout>
          <Sider width={200} style={{ background: '#fff' }}>
            <Menu
              onClick={this.handleClick}
              mode="inline"
              selectedKeys={[selectedArr.join('/')]}
              style={{ height: '100%', borderRight: 0 }}
            >
              {routes.map(route => (
                <Menu.Item key={route.path}>
                  <Icon type={route.iconType} />
                  {route.title}
                </Menu.Item>
              ))}
            </Menu>
          </Sider>
          <Layout style={{ padding: '0 24px 24px' }}>
            <Content
              style={{
                background: '#fff',
                padding: 24,
                margin: 0,
                minHeight: 280
              }}
            >
              {children}
            </Content>
          </Layout>
        </Layout>
      </Layout>
    )
  }
}
